<template>
    <div class="app">
        <h1>{{msg}}</h1>
        <!-- 通过父组件给子组件传递函数类型的props实现 ，子给父传递数据 -->
        <SchoolInfo :getSchooolName="getSchooolName"/>
        <hr>
        <!-- 通过父组件给子组件绑定一个自定义事件实现 ，子给父传递数据 -->
        <!-- <StudentInfo v-on:atguigu="getStudentName"/> -->
        <!-- <StudentInfo @atguigu.once="getStudentName"/> -->
         <StudentInfo @atguigu="getStudentName" @demo="m1"/>
        <!-- 通过父组件给子组件绑定一个自定义事件实现 ，子给父传递数据(第二种写法，使用ref) -->
        <!-- <StudentInfo ref="studentInfo"/> -->
    </div>
  
</template>

<script>
    //引入School组件
    import SchoolInfo from   './components/SchoolInfo'
    import StudentInfo from   './components/StudentInfo'
    export default {
        data() {
            return {
                msg: 'Welcome to Vue Test'
            }
        },
        name: 'App',
        components: {
            StudentInfo,
            SchoolInfo
        },
        methods: {
            getSchooolName(schoolName) {
                console.log('app收到了学校名字:', schoolName)
            },
            getStudentName(studentName) {
                console.log('app收到了学生姓名:', studentName)
            },
            m1(){
                console.log('m1')
            }
        },
        mounted() {
            //这种方式更灵活点，可以加延迟定时器
            // 通过ref获取子组件的实例对象
            // this.$refs.studentInfo.$on('atguigu', this.getStudentName);
            //只触发一次
            // this.$refs.studentInfo.$on('atguigu', this.getStudentName);
            
        }
    }
</script>

<style scoped>
.app{
    background-color: gray;
}

</style>